<template>
  <div id="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="QueryBerthDTO.berthName" placeholder="泊位名称"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="QueryBerthDTO.berthType" clearable placeholder="泊位类型">
          <el-option :value="0" label="有车"/>
          <el-option :value="1" label="无车"/>
          <el-option :value="2" label="未激活"/>
        </el-select>
      </el-form-item>
      <!--<el-form-item>
        <el-input v-model="QueryBerthDTO.InspectorName" placeholder="巡检员"/>
      </el-form-item>-->
      <el-button type="primary" icon="el-icon-search" @click="initData">查询</el-button>
      <el-button type="default" @click="resetData">重置</el-button>
      <!--表示路由的跳转，to 表示需要跳转的地址-->
      <router-link to="/berth/add">
        <el-button type="primary" icon="el-icon-search">新增</el-button>
      </router-link>

    </el-form>



    <!--数据显示列表-->
    <el-table fit highlight-current-row :data="dataList">
      <el-table-column type="index" label="序号" width="120"></el-table-column>.
      <el-table-column prop="berthCode" label="泊位编号" width="130" ></el-table-column>
      <el-table-column prop="berthName" label="泊位名称" width="130" ></el-table-column>
      <el-table-column prop="roadName" label="所属路段" width="150" ></el-table-column>
      <el-table-column prop="berthType" label="泊位类型" width="130" >
        <template slot-scope="scope">
          <span v-if="scope.row.berthType == 0">有车</span>
          <span v-if="scope.row.berthType == 1">无车</span>
          <span v-if="scope.row.berthType == 2">未激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/berth/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <!--<router-link :to="'/berth/' + scope.row.id">
            <el-button type="success" size="mini" icon="el-icon-search">收费详情</el-button>
          </router-link>-->

          <el-button type="success" size="mini" icon="el-icon-search" @click="zzz(scope.row)">收费详情</el-button>

          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="收费详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
          <span v-if="data.roadType == 0">全天收费</span>
          <span v-if="data.roadType == 1">节假日收费</span>
          <span v-if="data.roadType == 2">免费</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import berth from '../../api/berth'

  export default {
    // 表示定义数据模型
    data(){
      return {
        QueryBerthDTO: {},
        currentPage: 1,
        pageSize: 3,
        dataList: [],
        total: 10,
        dialogVisible: false,
        data: "",
      }
    },
    methods: {
      // 初始化查询数据
      initData(){
        berth.getList(this.currentPage, this.pageSize, this.QueryBerthDTO).then(res => {
          // res表示result res.data表示pageData res.data.data表示的分页的具体数据
          this.dataList = res.data.data;
          this.total = res.data.total;
        });
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.initData();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.initData();
      },
      // 清空搜索框内容
      resetData(){
        this.QueryBerthDTO = {};
        this.initData();
      },
      // 删除数据
      handleDelete(id){
        this.$confirm('是否确定删除数据？', '提示', {type: 'warning'}).then(() => {
          // 确定删除
          berth.delete(id).then(res => {
            this.$message.success(res.message);
            this.initData();
          });
        }).catch(() => {
          // 取消删除
          this.$message.info('取消删除操作');
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      zzz(data) {
        this.dialogVisible = true;
        this.data = data;
      }
    },
    created(){
      // 初始化页面数据
      this.initData();
    }
  }
</script>
